<template>
  <div class="w h box-b p8 b-f">
    <div class="w m-b2 f-s a-i-c">
      <span class="c8 fs20 m-r10 p-l10">项目管理 / 已有项目</span>
      <el-button type="primary" class="m-r10" @click="getDataList" icon="search">查询</el-button>
      <el-button type="warning" class="m-l10" @click="editProject()" icon="plus">创建项目</el-button>
    </div>
    <div style="height:calc(100% - 60px)" class="w box-b p6 over-a-y">
      <el-collapse class="m-b6" v-model="activeName" :accordion="false">
        <el-collapse-item v-for="(type,index) in projectType" :key="index" :title="type"
          :name="index+''">
          <div class="project-content">
            <template v-if="listMap[index].length>0" :key="i">
              <div v-for="(item,i) in listMap[index]" class="box cur-p" @click="goCollectionPage(item)">
                <div class="w h-160 f-c a-i-c">
                  <el-image fit="cover" class="w h" :src="getImagePath(item)"></el-image>
                </div>
                <div class="w t-c p-t5 p-b5 els">
                  {{ item.name }}
                </div>
              </div>
            </template>
            <el-empty v-else description="没有找到相关信息！"></el-empty>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { ElIconRender } from '@/importComponents'
import { imageApis, RequestCode } from '@/server/base'
import { Project } from '@/apis/project/index'

export default {
  name: '项目设置',
  mixins: [frameProperty],
  components: {
    ElIconRender
  },
  data() {
    return {
      activeName: ['0', '1', '2'],
      tableData: [],
      // projectTableData: [],
      listLoading: false,

      listMap: {
        0: [],
        1: [],
        2: []
      } as { 0: any[]; 1: any[]; 2: any[] },

      projectType: ['图像检测', '图像分类', '图像分割']
    }
  },
  methods: {
    getImagePath(item: any) {
      return `${imageApis}/project/${item.thumbnail}`
    },
    goCollectionPage(item: any) {
      this.$router.push({
        name: 'CollectionManage',
        params: {
          projectId: item.id
        }
      })
    },
    // getProjectDataList(type: number) {
    //   this.listLoading = true
    //   Project.list({ type })
    //     .then((res: RequestCode) => {
    //       this.projectTableData = res.data

    //       this.listLoading = false
    //     })
    //     .catch(() => {
    //       this.listLoading = false
    //     })
    // },

    // getProjectByIds(projectIds: string) {
    //   if (!projectIds) {
    //     return ''
    //   }
    //   const projectId = typeof projectIds == 'string' ? projectIds.split(',') : projectIds
    //   return this.projectTableData.filter((item: { id: string | number }) =>
    //     projectId.includes(item.id + '')
    //   )
    // },

    getDataList() {
      // this.getProjectDataList(0)
      // this.getProjectDataList(1)
      // this.getProjectDataList(2)
      // this.listLoading = true
      Project.list()
        .then((res: RequestCode) => {
          this.tableData = res.data
          this.listMap = {
            0: res.data.filter((item: { type: string | number }) => item.type == 0),
            1: res.data.filter((item: { type: string | number }) => item.type == 1),
            2: res.data.filter((item: { type: string | number }) => item.type == 2)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    editProject(row: any = null, isEdit: boolean = false) {
      this.dialogPagePush({
        name: 'projectEdit',
        params: {
          isEdit,
          row
        }
      })
    },

    deleteRole(row: { id: number | string }) {
      // if (!row.id) {
      //   return
      // }
      // this.$confirm('确定删除吗', '提示')
      //   .then(res => {
      //     Role.removeById({ id: row.id }).then((result: RequestCode) => {
      //       this.getDataList()
      //     })
      //   })
      //   .catch(e => {})
    }
  },
  created() {
    // this.getProjectDataList()
    this.getDataList()
  }
}
</script>

<style lang="scss" scoped>
.project-content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;

  .box {
    margin: 4px;
    margin-bottom: 8px;
    width: 160px;
    height: 200px;
    // background: #f7f7f7;
  }
}
</style>